<template>
	<view class="l-c-box">
		<!-- 左侧列表 -->
		<scroll-view class="l-c-left" scroll-y="true" :scroll-top="verticalNavTop" scroll-with-animation>
			<view class="l-c-left-list" v-for="(item, index) in lists" :key="index" @click="tapselect(index)">
				<!-- activeItem为选中状态 -->
				<view class="l-c-left-item" :class="{ activeItem: currentTab == index }">
					<label></label>
					<text>{{ item[leftTitleMap] }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 右侧列表 -->
		<scroll-view class="l-c-right" scroll-y="true" @scroll="mainScroll" :scroll-into-view="'l-c-' + mainCur" scroll-with-animation>
			<view v-for="(item, index) in lists" :key="index" :id="'l-c-' + index">
				<view class="l-c-right-title">
					{{ item[leftTitleMap] }}
				</view>
				<view class="l-c-right-list">
					<view class="l-c-right-item" v-for="(c, cidx) in item[rightListMap]" :key="cidx" @click="itemClick(c)">
						<image :src="c[rightListImageMap]" :mode="imageMode"></image>
						<text>{{ c[rightListTitleMap] }}</text>
					</view>
				</view>
			</view>
			<view style="height: 50rpx"></view>
		</scroll-view>
	</view>
</template>

<script>
/**
 * DearyCateList 分类列表
 * @description 用于展示分类列表
 * @property {Array} lists 列表需要的数据对象
 * @property {String} leftTitleMap 左侧列表的标题字段
 * @property {String} rightListMap 右侧列表的字段
 * @property {String} rightListTitleMap 右侧列表的标题字段
 * @property {String} rightListImageMap 右侧列表的图片字段
 * @property {String} imageMode 图片的展示模式
 * @event {Function} click 点击事件 ，返回当前的事件对象
 * @example <deary-cate-list :lists="" @click=""></deary-cate-list>
 */
export default {
	name: 'DearyCateList',

	emits: ['click'],

	components: {},

	props: {
		lists: {
			type: Array,
			default() {
				return [];
			}
		},
		activeIndex: {
			type: String,
			default: '0'
		},
		leftTitleMap: {
			type: String,
			default: 'name'
		},
		rightListMap: {
			type: String,
			default: 'goods'
		},
		rightListTitleMap: {
			type: String,
			default: 'name'
		},
		rightListImageMap: {
			type: String,
			default: 'image'
		},
		imageMode: {
			type: String,
			default: 'aspectFill'
		}
	},

	data() {
		return {
			currentTab: Number(this.activeIndex),
			mainCur: 0,
			verticalNavTop: 0,
			list: [{}]
		};
	},

	computed: {},

	watch: {
		activeIndex(newValue) {
			this.currentTab = newValue;
		}
	},

	created() {},

	mounted() {
		this.getHeight();
	},

	destroyed() {},

	methods: {
		itemClick(item) {
			this.$emit('click', item);
		},
		//点击左侧按钮
		tapselect(index) {
			this.currentTab = index;
			this.mainCur = index;
			this.verticalNavTop = (index - 1) * 50;
		},
		//右侧滚动
		mainScroll(e) {
			let scrollTop = e.detail.scrollTop + 10;
			for (let i = 0; i < this.list.length; i++) {
				if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
					this.currentTab = i;
					this.verticalNavTop = (i - 1) * 50;
					return false;
				}
			}
		},
		//获取右侧每项的top和bottom,里面需获取对应dom元素的高度，所以只能在mounted生命周期里调用
		getHeight() {
			this.$nextTick(() => {
				let top = 0;
				let bottom = 0;
				let temp = 0;
				for (let i = 0; i < this.lists.length; i++) {
					let view = uni.createSelectorQuery().select('#l-c-' + i);
					view.fields(
						{
							size: true
						},
						(data) => {
							top = temp;
							bottom = temp + ((data && data.height) || 0);
							this.list[i] = {
								top: top,
								bottom: bottom
							};
							temp = bottom;
						}
					).exec();
				}
			});
		}
	}
};
</script>

<style scoped>
.l-c-box {
	position: absolute;
	top: 0;
	bottom: 0;
	background: #fff;
	width: 100%;
	display: flex;
}

.l-c-left {
	width: 200rpx;
	background: #f8f8f8;
	height: 100%;
}

.l-c-left-item {
	background: #f8f8f8;
	height: 50px;
	display: flex;
	align-items: center;
}

.l-c-left-item.activeItem {
	background: #fff;
}

.l-c-left-item label {
	width: 4rpx;
	height: 15px;
	float: left;
	background: #f8f8f8;
}

.l-c-left-item.activeItem label {
	height: 50rpx;
	background: #cfae7d;
}

.l-c-left-item text {
	width: 196rpx;
	font-size: 28rpx;
	display: block;
	text-align: center;
}

/* 右侧*/
.l-c-right {
	flex: 1;
}

.l-c-right-title {
	margin-top: 20rpx;
	line-height: 34rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	margin-left: 20rpx;
}

.l-c-right-list {
	height: auto;
	overflow: hidden;
}

.l-c-right-item {
	width: 33.33%;
	float: left;
	margin-top: 20rpx;
}

.l-c-right-item image {
	width: 140rpx;
	height: 140rpx;
	border-radius: 10rpx;
	display: block;
	margin: 0 auto;
}

.l-c-right-item text {
	display: block;
	text-align: center;
	font-size: 24rpx;
	margin: 10rpx auto 0;
	width: 140rpx; /* 设置一个固定的或最大宽度 */
	white-space: nowrap; /* 禁止文本换行 */
	overflow: hidden; /* 隐藏超出容器的文本 */
	text-overflow: ellipsis; /* 使用省略号代替隐藏的内容 */
}
</style>
